<template>
  <div class="content-wrap">
    <div class="inmsg-list-content">
      <div
        class="items"
        :class="{ active: activeItem === i }"
        v-for="(item, i) in value"
        :label="item.id"
        :key="i"
      >
        <el-checkbox class="checkbox" v-model="item.isChecked"></el-checkbox>
        <div class="item-box" @click="handleClickItem(item, i)">
          <div class="title">
            <span>{{ item.typeName }}</span>
            <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
            <span>{{ item.title }}</span>
          </div>
          <span class="time">{{ getTime(item.createTime) }}</span>
          <!-- 消息状态0 学生发起运营未读 1运营已读 2运营回复 学生未读 3学生已读 4学生回复运营未读 5系统消息未读 6 系统消息已读 -->
          <span
            class="tag read"
            v-if="
              item.status === '0' ||
              item.status === '1' ||
              item.status === '3' ||
              item.status === '4' ||
              item.status === '6'
            "
            >已读</span
          >
          <span
            class="tag no-read"
            v-if="item.status === '2' || item.status === '5'"
            >未读</span
          >
        </div>
      </div>
    </div>
    <div class="mobile-list-content">
      <div
        class="items"
        :class="{ active: activeItem === i }"
        v-for="(item, i) in value"
        :label="item.id"
        :key="i"
      >
        <van-checkbox class="checkbox" shape="square" v-model="item.isChecked"></van-checkbox>
        <div class="item-box" @click="handleClickItem(item, i)">
          <div class="title">
            <p class="title-top">
              <span>{{ item.typeName }}</span>
              <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
              <span>{{ item.title }}</span>
            </p>
            <p class="time-box">
              <span class="time">{{ getTime(item.createTime) }}</span>
            </p>
          </div>
        </div>
        <div class="box-right">
          <!-- 消息状态0 学生发起运营未读 1运营已读 2运营回复 学生未读 3学生已读 4学生回复运营未读 5系统消息未读 6 系统消息已读 -->
          <span
            class="tag read"
            v-if="
              item.status === '0' ||
              item.status === '1' ||
              item.status === '3' ||
              item.status === '4' ||
              item.status === '6'
            "
            >已读</span
          >
          <span
            class="tag no-read"
            v-if="item.status === '2' || item.status === '5'"
            >未读</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/utils";
export default {
  // 组件名称
  name: "ListContent",
  // 组件参数 接收来自父组件的数据
  props: {
    value: Array,
    item: Object,
    msgList: Array,
    statusEnmu: Object,
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      checkAll: false,
      checkedList: [],
      isIndeterminate: true,
      checked: false,
      activeItem: 0,
    };
  },
  // 组件方法
  methods: {
    getTime(value) {
      return formatDate(new Date(value));
    },
    handleClickItem(item, i) {
      this.activeItem = i;
      this.timer = setTimeout(() => {
        this.$emit("handleClickItem", item);
      });
    },
  },
  mounted() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.inmsg-list-content {
  .checkbox {
    margin-right: 20px;
    .el-checkbox__inner {
      display: inline-block;
      width: 20px;
      height: 20px;
    }
    .el-checkbox__inner::after {
      width: 4px;
      height: 10px;
      left: 6px;
    }
  }
}
</style>
<style lang="less" scoped>

@media (min-width: 769px) {
.mobile-list-content {
  display: none;
}
  .inmsg-list-content {
    flex-shrink: 0;
    .is-plain {
      color: #409eff !important;
      background: #ecf5ff !important;
      border-color: #b3d8ff !important;
    }

    .items {
      display: flex;
      justify-content: start;
      width: 100%;
      cursor: pointer;
      position: relative;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      padding: 20px;
      display: flex;
      align-items: center;

      .item-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

        .title {
          margin-bottom: 10px;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
        }

        .time {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
        }

        .tag {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          padding: 3px 5px;
          font-size: 16px;
          font-weight: 500;
          line-height: 22px;
        }
        .read {
          color: #6fc70f;
        }

        .no-read {
          color: #fc9c21;
        }
      }
    }

    .active {
      background: #f9f9f9;
    }
  }
}
@media (max-width: 768px) {
  .inmsg-list-content {
    display: none;
  }
  .mobile-list-content {
    border-top: 1px solid #F0F0F0;
    padding: 0 0.12rem;
    .items {
      display: flex;
      padding: 0.12rem 0;
      border-bottom: 1px solid #E6E6E6;
    }
  }
  .item-box {
    display: flex;
    height: auto;
    margin-left: 0.1rem;
    align-items: center;
    flex: 1;
    .title {
      .title-top {
        margin-bottom: 0.05rem;
        span {
          display: inline-block;
          height: 0.21rem;
          font-size: 0.15rem;
          color: #37383D;
          line-height: 0.21rem;
        }
      }
      .time-box {
        span {
          height: 0.17rem;
          font-size: 0.12rem;
          color: #9597A0;
          line-height: 0.17rem;
        }
      }
    }
  }
  .box-right {
      .tag {
        height: 0.44rem;
        font-size: 0.14rem;
        font-weight: 500;
        color: #FC9C21;
        line-height: 0.44rem;
      }
      .read {
        color: #6FC70F;
      }
    }
}


</style>
